<template>
  <div class="gantt" ref="gantt"></div>
</template>

<script>
	import gantt from 'dhtmlx-gantt'
	export default {
		name: 'app',
		components: {
		},
		props: {
			tasks: {
				type: Object,
				default () {
					return {data: [], links: []}
				}
			},
      config: {
				type: Object,
        default () {
					return {}
        }
      }
		},
		mounted: function () {
			let that = this;
			gantt.config = Object.assign(gantt.config, this.$props.config, true);
			console.log(gantt.config)

			gantt.init(this.$refs.gantt);
			gantt.parse(this.$props.tasks)

			gantt.attachEvent('onAfterTaskAdd', (id, task) => {
				this.$emit('task-updated', id, 'inserted', task)
			})

			gantt.attachEvent('onAfterTaskUpdate', (id, task) => {
				this.$emit('task-updated', id, 'updated', task)
			})

			// gantt.attachEvent('onAfterTaskDelete', (id) => {
			// 	this.$emit('task-updated', id, 'deleted')
			// 	if(!gantt.getSelectedId()) {
			// 		this.$emit('task-selected', null)
			// 	}
			// })

			gantt.attachEvent("onBeforeLightbox", function(id) {
				// var task = gantt.getTask(id);
				// task.my_template = "<span id='title1'>Holders: </span>"+ task.users
				// 	+"<span id='title2'>Progress: </span>"+ task.progress*100 +" %";
				let task = gantt.getTask(id);
				that.$emit('doubleClickTask', id, task);
				return false;
			});


			gantt.attachEvent('onBeforeTaskSelected', (id) => {
				console.log("onBeforeTaskSelected")
				this.$emit('task-selected', id)
			})

			gantt.attachEvent('onAfterLinkAdd', (id, link) => {
				this.$emit('link-updated', id, 'inserted', link)
			})

			gantt.attachEvent('onAfterLinkUpdate', (id, link) => {
				this.$emit('link-updated', id, 'updated', link)
			})

			gantt.attachEvent('onAfterLinkDelete', (id, link) => {
				console.log(link)
				this.$emit('link-updated', id, 'deleted')
			})
		}
	}
</script>

<style>
  @import "~dhtmlx-gantt/codebase/dhtmlxgantt.css";

  .gantt {
    height: 500px;
  }
</style>
